<template>
  <div class="details">
    <!-- 头部 -->
    <div class="del_header">
      <div class="del_header_bg">
        <img src="books_fm/hongloumeng.jpg" alt="" />
      </div>
      <mt-header title="">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <div class="header_content">
        <img src="books_fm/hongloumeng.jpg" alt="" />
        <div class="header_text">
          <h3 class="title">红楼梦</h3>
          <p class="c_main">曹雪芹</p>
          <p>
            <span>连载</span>
            <i></i>
            <span>10.67万</span>
            <i></i>
            <span>178.28万</span>
          </p>
          <p class="c_main">
            <span>名著</span>
            <span>古代</span>
            <span>文学</span>
            <span>cp578413</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 简介 -->
    <div class="del_con">
      <div class="head">
        <div class="head_item">
          <p>11864</p>
          <span>
            <img src="../assets/collecton_off.png" alt="" />
          </span>
        </div>
        <div class="head_item">
          <p>11864</p>
          <span>
            <img src="../assets/star.png" alt="" />
          </span>
        </div>
        <div class="head_item">
          <p>11864</p>
          <span>
            <img src="../assets/comment.png" alt="" />
          </span>
        </div>
        <div class="head_item">
          <p>11864</p>
          <span>
            <img src="../assets/money.png" alt="" />
          </span>
        </div>
      </div>

      <div class="content">
        <div class="con" id="con">
          <p>
            别名《石头记》等，中国古代章回体长篇小说，中国古典四大名著之一，通行本共120回，大部分人认为前80回是清代作家曹雪芹所著，后40回作者为无名氏，整理者为程伟元、高鹗。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线，描绘了一些闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度展现女性美以及中国古代社会百态的史诗性著作。
          </p>
        </div>
        <span class="c_main" @click="unfold($event)">展开</span>
        <div class="directory">
          <div class="top">
            <h5 @click="getShow()">查看目录</h5>
            <p>第⼀回 甄⼠隐梦幻识通灵贾⾬村风尘怀闺秀；</p>
          </div>
          <div class="btns btn_two">
            <mt-button size="small" class="bg_main"> 立即阅读 </mt-button>
            <mt-button size="small" class="bg_main">收藏本文</mt-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 作者相关推荐 -->
    <div>
      <div class="items strong_push">
        <div class="item">
          <router-link to="/">
            <img class="books_fm" src="books_fm/hongloumeng.jpg" />
            <div class="text">
              <div class="top">
                <h4>曹雪芹<i>更多</i></h4>
              </div>
              <div class="bottom">
                <span>作品 14</span>
                <span>粉丝 95991</span>
              </div>
            </div>
          </router-link>
        </div>
      </div>
      <div class="items strong_push" style="margin-top: -2.6rem">
        <div class="books_push">
          <books-vertical />
          <books-vertical />
          <books-vertical />
        </div>
      </div>
    </div>

    <!-- 相关推荐 -->
    <div class="items">
      <h3 class="title no">
        相关推荐
        <a>换一换</a>
      </h3>
      <div>
        <cross-itme />
        <cross-itme />
        <cross-itme />
      </div>
    </div>

    <!-- 大家在看 -->
    <div class="items">
      <h3 class="title no">
        大家在看
        <a>换一换</a>
      </h3>
      <div>
        <cross-itme />
        <cross-itme />
        <cross-itme />
      </div>
    </div>

    <!-- 目录 -->
    <div id="catalogue">
      <div class="bg" @click="getNo()"></div>
      <div class="cat_list">
        <mt-navbar v-model="selected">
          <mt-tab-item id="1">目录</mt-tab-item>
          <mt-tab-item id="2">书签</mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <div class="cat_list_con">
              <router-link to="/bookscon">
                <span>1</span>
                <p class="c_main">第⼀回 甄⼠隐梦幻识通灵贾⾬村风尘怀闺秀；</p>
              </router-link>
              <router-link to="/bookscon">
                <span>2</span>
                <p class="c_main">第⼀回 甄⼠隐梦幻识通灵贾⾬村风尘怀闺秀；</p>
              </router-link>
              <router-link to="/bookscon">
                <span>3</span>
                <p class="c_main">第⼀回 甄⼠隐梦幻识通灵贾⾬村风尘怀闺秀；</p>
              </router-link>
              <router-link to="/bookscon">
                <span>4</span>
                <p class="c_main">第⼀回 甄⼠隐梦幻识通灵贾⾬村风尘怀闺秀；</p>
              </router-link>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <div class="cat_list_con">
              <router-link to="/bookscon">
                <span>1</span>
                <p class="c_main">第⼀回 甄⼠隐梦幻识通灵贾⾬村风尘怀闺秀；</p>
              </router-link>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
  </div>
</template>

<script>
import BooksVertical from "@/components/BooksVertical.vue";
import CrossItme from "@/components/CrossItme.vue";
export default {
  components: { BooksVertical, CrossItme },
  name: "page-nacbar",
  data() {
    return {
      selected: "1",
    };
  },
  methods: {
    getNo() {
      let div = document.getElementById("catalogue");
      div.className = "";
    },
    getShow() {
      let div = document.getElementById("catalogue");
      console.log(div);
      div.className = "show";
    },
    unfold(e) {
      if (con.style.height == "inherit") {
        con.style.height = "42vw";
        console.log(e.target.innerHTML);
        e.target.innerHTML = "展开";
      } else {
        con.style.height = "inherit";
        e.target.innerHTML = "收起";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 头部
.del_header {
  height: 60vw;
  width: 100%;
  position: relative;

  // &::before {
  //   content: "";
  //   width: 100%;
  //   height: 100%;
  //   display: block;
  //   top: 0;
  //   background-image: linear-gradient(to top, #fff, transparent),
  //     url("../../public/books_fm/hongloumeng.jpg");
  //   background-repeat: no-repeat;
  //   background-size: 100% 100%;
  //   filter: blur(0.3920104536rem);
  // }
  .del_header_bg {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: blur(0.3920104536rem);
    img {
      width: 100%;
      height: 100%;
    }
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(to top, #fff, transparent);
    }
  }

  .mint-header {
    position: absolute;
    top: 0;
    width: 100%;
    background: transparent;
  }
  .header_content {
    background: #fff8;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0.9rem;
    right: 0.9rem;
    border-radius: 4px;
    display: flex;
    padding: 0.2rem;
    img {
      width: 30vw;
      height: 38vw;
      border-radius: 2px;
      margin-right: 0.8rem;
    }
    .header_text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .title {
        font-size: 1.1rem;
        font-weight: normal;
      }
      p {
        font-size: 0.8rem;
        color: #959595;
        display: flex;
        margin: 0.2rem 0;
        i {
          width: 1px;
          height: 1rem;
          display: inline-block;
          background: #959595;
          margin: 0.1rem 0.6rem;
        }
        &.c_main {
          span {
            margin-right: 0.6rem;
            &:last-child {
              margin: 0;
              color: #959595 !important;
            }
          }
        }
      }
    }
  }
}

// 内容
.del_con {
  padding: 0.9rem;
  .head {
    display: flex;
    justify-content: space-between;
    .head_item {
      width: 20vw;
      p {
        text-align: center;
        width: 20vw;
        display: block;
        word-break: break-all;
      }
      span {
        width: 20vw;
        img {
          width: 20vw;
          display: block;
        }
      }
    }
  }
  .content {
    margin-top: 0.9rem;
    .con {
      height: 42vw;
      overflow: hidden;
      margin-bottom: 0.2rem;
      p {
        text-indent: 2em;
        font-size: 0.9rem;
        line-height: 1.8;
      }
    }

    .directory {
      margin-top: 0.9rem;
      .top {
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        margin-bottom: 0.9rem;
        h5 {
          width: 22%;
          margin-right: 0.9rem;
          font-size: 1rem;
          font-weight: normal;
        }
      }
      .btns .mint-button--small {
        border-radius: 4px !important;
      }
    }
  }
}
.del_con {
  margin-bottom: -0.8rem;
}
.details {
  .strong_push a .text h4 i {
    float: right;
    margin-left: 0.9rem;
    color: #8f8f9e;
    font-size: 0.8rem;
    background: #d3d3d333;
    padding: 0.1rem 0.6rem;
    border-radius: 20px;
    font-style: normal;
  }
  .strong_push .item .books_fm {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
  }
  .strong_push .item .text {
    justify-content: center;
  }
  .strong_push a .text .bottom {
    justify-content: flex-start;
    margin-top: 0.2rem;
    span {
      margin-right: 0.6rem;
    }
  }
}

#catalogue {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 100%;
  right: 0;
  display: flex;
  z-index: 9;
  transition: 0.8s;
  &.show {
    left: 0;
  }

  .bg {
    background: #0004;
    width: 20vw;
    height: 100%;
  }
  .cat_list {
    width: 80vw;
    background: #fff;
    height: 100%;
    overflow-y: auto;

    .cat_list_con {
      padding: 0.9rem;
      a {
        display: flex;
        border-bottom: 1px dotted #ddd;
        padding: 0.9rem 0;
        span {
          width: 2rem;
          text-align: center;
          margin-right: 0.9rem;
        }
        p {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: block;
        }
      }
    }
  }
}
</style>